<template>
  <div>
    <nav-bar class="shop-nav">
      <div slot="center">购物车({{ counter }})</div>
    </nav-bar>
    <scroll class="content">
      <shop-children
        v-for="(shop, index) in $store.state.shop"
        :key="index"
        :shopChild="shop"
        @isAllCheckClick="isAllCheckClick"
      ></shop-children>
    </scroll>
    <total class="shop-total" ref="total"></total>
  </div>
</template>

<script>
import total from "./shopChildren/total.vue";
import scroll from "components/common/scroll.vue";
import shopChildren from "./shopChildren/shopChildren.vue";
import navBar from "components/common/navBar.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    shopChildren,
    navBar,
    scroll,
    total,
  },
  computed: {
    ...mapGetters(["counter"]),
  },
  methods: {
    isAllCheckClick(flag) {
      this.$refs.total.checked = flag;
    },
  },
};
</script>

<style scoped>
.shop-nav {
  background-color: var(--color-tint);
  color: azure;
}
.content {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 98px;
  left: 0;
  right: 0;
}
.shop-total {
  position: fixed;
  bottom: 49px;
  left: 0;
  right: 0;
  z-index: 9;
}
</style>
